<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./jQuery.min.js"></script>
    <script>
        // JQ删除标签
        jQ对象.remove() 将当前标签删除
        jQ对象.empty()  将当前标签中的内容全部删除(不删标签)


        // 创建元素
        let res = $('<h1></h1>')
        res.text('哈哈哈哈哈')


        // 添加元素
        添加到末尾    append  $(父元素).append(创建的元素)
        添加到开始    prepend $(父元素).prepend(创建的元素);



        // jQ获取元素大小
        jQ对象.width()----> 获取当前元素内容区域的宽度
        jQ对象.innerWidth()----> 获取当前元素内容区域 + 内边距
        jQ对象.outerWidth()----> 获取当前元素的实际大小(内容 + 内边距 + 外边框)






        // jQ中获取元素位置
        jQ对象.offset()     以整个页面为准获取元素位置
        jQ对象.position()   遵循子绝父相, 若父元素有定位则以父元素为准获取元素位置





        // jQ中获取滚动的距离(位置)
        JQ对象.scrollTop()
        // 例: 需要在滚动事件中获取
        $(window).scroll(function () {
            console.log(123);
            console.log($(this).scrollTop());
        })








        // jQ注册事件:
        jQ对象.事件类型(function () { })
        jQ对象.on('事件类型', function () { })
        // 使用on的方式一次可以给标签注册多种不同的事件类型







        // jQ委托事件
        $('父元素').on('事件类型', '简单选择器', function () { })
        // 例:
        $('ul').on('click', 'li', function () {
            console.log($(this).text());
        })



        // jQ移除事件
        // 非委托方式
        jQ对象.off('事件类型')
        // 委托方式
        父元素.off('事件类型')
        // 移除委托事件中指定的事件
        父元素.off('事件类型', '选择器')




        // 表单
        // 提交数据
        action属性: 设置表单提交地址
        method属性: 设置表单提交方式  get(默认方式)  post
        // get提交数据:
        数据在地址栏中可见
        get重点在于从服务端获取数据
        // post提交数据: 
        数据是通过后台异步提交(地址栏看不到数据)
        post重点在于提交数据(注册信息)
    </script>
</body>

</html>